<template>
	<div class="page">
		<!-- 展示列表模块 -->
		<!-- <div class="headerTop">
			<span v-if="grade<=2">所属项目:</span>
			<el-select v-if="grade<=2" v-model="option" placeholder="选择项目" class="inpu" :readonly="readonly">
				<el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
				</el-option>
			</el-select>
			设备名称:
			<el-input type="text" v-model="search_commodity" class="inpu" placeholder="输入设备名称"></el-input>
			<el-button type="primary" size="small" @click="searchGoods">查询</el-button>
		</div> -->
		<div class="header_bottom">
			<el-button type="success" size="small" @click="add">添加转发</el-button>
			<el-button type="primary" size="small" @click="showAll" v-if="all">刷新全部</el-button>
			<!--<el-button type="danger" size="small"  @click="deleteGoods">删除</el-button>-->
		</div>
		<div class="container_table">
			<el-table :data="tabledata" size="mini"  border style="width: 99.4%;" 
			 :header-cell-style="{
				'background-color':tableHead,
				'color': 'white',
                'fontSize':'0.3rem',
				'height':'0.6rem',
				'line-height':'0.6rem',
				'padding':'0.1rem'
			}" :cell-style="{'fontSize':'0.3rem'}">
			    <el-table-column label="ID" prop="id" align="center" min-width="40" fixed>
				</el-table-column>
				<el-table-column label="所属项目" align="center" min-width="180">
					<template slot-scope="scope">
						<span>{{scope.row.product_name?scope.row.product_name:'全部'}}</span>
					</template>
				</el-table-column>
				<el-table-column label="设备名称" align="center" min-width="180">
					<template slot-scope="scope">
						<span>{{scope.row.equip_name?scope.row.equip_name:'全部'}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="slave_name" label="子设备名称" align="center" min-width="150">
					<template slot-scope="scope">
						<span>{{scope.row.slave_name?scope.row.slave_name:'-'}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="transfer_url" label="转发地址" align="center" min-width="200">
				</el-table-column>
				<el-table-column label="是否启用" align="center" min-width="100">
					<template slot-scope="scope">
						<el-switch class="mar_l" v-model="scope.row.rule_state" :width="stateWidth" @change="sureSetState(scope.row,scope.row.rule_state)"
						 active-color="#13ce66" inactive-color="#ccc" active-text="是" inactive-text="否" :active-value="one"  :inactive-value="zero">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="add_time" label="添加时间" align="center" min-width="120">
				</el-table-column>
				<el-table-column label="操作" min-width="140" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="modifyform(scope.row)">编辑</el-button>
						<!-- <el-button type="success" size="small" @click="setIt">配置</el-button> -->
						<el-button @click="sureDelete(scope.row)" type="danger" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="current_change" :current-page="queryParams.pageNo"
				 :page-size="queryParams.pageSize" :page-sizes="[10,15,20]" layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'transpondData',
		data() {
			return {
				one:1,
				zero:0,
				grade:localStorage.getItem("grade"),
				all: false,
			    baseurl: this.$baseurl,
				tableHead:localStorage.getItem("bgcolor"),
				readonly: false,
				stateWidth: 46,
				search_commodity: '', //输入框内容
				option: null,
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					total: 0
				},
				//pburl:'http://39.98.232.220:8083/',
				tabledata: [],
				options: [{
					value: 0,
					label: '全部'
				}]
			}
		},

		created() {
			this.queryParams.pageNo=Number(localStorage.getItem("currentHappenNo")) || 1; 
			this.getProduct();
			this.showList(this.queryParams.pageNo,this.queryParams.pageSize);
        },
        methods: {
			current_change: function(currentPage) {
				this.queryParams.pageNo =currentPage;
				this.showList(currentPage, this.queryParams.pageSize,this.search_commodity, this.option);
				//console.log(currentPage)
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				this.showList(this.queryParams.pageNo, val,this.search_commodity, this.option);
			},
            getProduct(){
				this.$http({
					method: 'post',
					url: 'api/product/all',
					data: {}
				}).then(res => { //
					//console.log(res.data.data)
					if( res && res.data.result == "success"){
						for (var i = 0; i < res.data.data.length; i++) {
							var option = {
								value: res.data.data[i].id,
								label: res.data.data[i].product_name
							}
							this.options.push(option)
						}
						this.option = this.options[0].value;
					}
				}).catch(error => {
					console.log(error);
				});
			},
			changeState(row, value) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/rule/setState',
						data: {
							'rule_state': value,
							'id': row.id
							
						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							this.$message({
								message: '恭喜,修改转发状态成功!',
								type: 'success',
								center: true
							});
							this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.search_commodity, this.option);
					    }else{
							this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.search_commodity, this.option);
						}
					}).catch(error => {
						console.log(error);
						this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.search_commodity, this.option);
					});
			
			},
			
			sureSetState(row,value) {
				this.$confirm('改变状态将影响到数据是否能够转发, 是否确认此操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.changeState(row,value);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消改变状态！'
					});
					this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.search_commodity, this.option);
				});
			},
			//获取数据函数
			showList: function(num, size, keyword, product) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/rule/lists',
						data: {
							'limit': size,
							'page': num,
							'keyword': keyword,
							'product_id': product
						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							that.tabledata = res.data.data;
							this.queryParams.total = res.data.count;
					    }
					}).catch(error => {
						console.log(error)
						this.tabledata = [];
						this.queryParams.total = 0;
						this.queryParams.pageNo = 1;
					});
			},
			// 点击搜索输入框里的内容
			searchGoods: function() {
				this.all = true;
				this.queryParams.pageNo=1;
				this.showList(1, this.queryParams.pageSize, this.search_commodity, this.option);
			},
			showAll() {
				this.all = false;
				this.queryParams.pageNo=1;
				this.search_commodity = '';
				this.option=0;
				// this.id = 0;
				this.showList(1, this.queryParams.pageSize);
			},
			add() {
				this.$router.push({
					name: 'addTranspond',
					path: '/addTranspond',
					component: 'addTranspond'
				})

			},
			modifyform(row) {
				this.$router.push({
					name: 'editTranspond',
					path: 'editTranspond'
				})
				localStorage.setItem('editTranspondId', row.id);
				localStorage.setItem("currentTranspondNo",this.queryParams.pageNo);
			},

			sureDelete(row) {
				this.$confirm('删除后无法恢复,是否确认删除该转发?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleClick(row);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClick(row) {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/rule/delete',
					data: {
						"id": row.id
						
					}
				}).then(res => { //
					//console.log(res.data.data)
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜,删除转发成功!',
							type: 'success',
							center: true
						});
						
					this.showList(this.queryParams.pageNo, this.queryParams.pageSize);
					}
				}).catch(error => {
					console.log(error)
				});
				//console.log(tab, event);
			}
		}
	}
</script>

<style scoped>
	@media all and (max-width:1920px) {
		.mar_l{
		  -ms-transform: translateX(0.4rem)!important;
		  -webkit-transform: translateX(0.4rem)!important;
		  transform: translateX(0.4rem)!important;
		}
	}
	
	@media all and (max-width:1600px) {
		.mar_l{
		  -ms-transform: translateX(0.4rem)!important;
		  -webkit-transform: translateX(0.4rem)!important;
		  transform: translateX(0.4rem)!important;
		}
	}
	
	@media all and (max-width:1366px) {
		.mar_l{
		  -ms-transform: translateX(0)!important;
		  -webkit-transform: translateX(0)!important;
		  transform: translateX(0)!important;
		}
	}
	
    /* .inpu {
		margin-right: 0.4rem;
	} */
    .container_table /deep/ .el-switch__label--right{
    	right:64px!important;
    }
    .container_table /deep/ .el-switch__label--left{
    	left:64px!important;
    }
   /* .inpu {
		width:5rem;
		font-size: 16px;
	} */
</style>
